<template>
    <div>
        <div class="container">
            <div class="handle-box">
                <el-button
                    type="primary"
                    icon="el-icon-delete"
                    class="handle-del mr10"
                    @click="delAllSelection"
                >批量删除</el-button>
                <el-input v-model="query.title" placeholder="关键字检索" class="handle-input mr10"></el-input>
                <el-button type="primary" icon="el-icon-search" @click="handleSearch">搜索</el-button>
				<el-button type="primary"  @click="addBanner">添加banner</el-button>
            </div>
            <el-table
                :data="tableData"
                border
                class="table"
                ref="multipleTable"
                header-cell-class-name="table-header"
                @selection-change="handleSelectionChange"
            >
                <el-table-column type="selection" width="55" align="center"></el-table-column>
                <el-table-column prop="id" label="ID" width="55" align="center"></el-table-column>
                <el-table-column prop="title" label="标题"></el-table-column>
				<el-table-column label="缩略图(查看大图)" align="center">
				    <template slot-scope="scope">
				        <el-image
				            class="table-td-thumb"
							:lazy='true'
							fit='contain'
				            :src="bannerUrl(scope.row.path)"
				            :preview-src-list="[bannerUrl(scope.row.path)]"
				        ></el-image>
				    </template>
				</el-table-column>
                <el-table-column prop="href" label="连接地址"></el-table-column>
                <el-table-column prop="status_name" label="状态"></el-table-column>
                <el-table-column prop="created_at" label="添加时间"></el-table-column>
                <el-table-column label="操作" width="180" align="center">
                    <template slot-scope="scope">
                        <el-button
                            type="text"
                            icon="el-icon-edit"
                            @click="handleEdit(scope.$index, scope.row)"
                        >编辑</el-button>
                        <el-button
                            type="text"
                            icon="el-icon-delete"
                            class="red"
                            @click="handleDelete(scope.$index, scope.row)"
                        >删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="pagination">
                <el-pagination
                    background
                    layout="total, prev, pager, next"
                    :current-page="query.pageIndex"
                    :page-size="query.pageSize"
                    :total="pageTotal"
                    @current-change="handlePageChange"
                ></el-pagination>
            </div>
        </div>
        <!-- 编辑弹出框 -->
         <el-dialog :title="`${currentId?'修改':'新增'}banner`" :visible.sync="showAdd">
			<el-form :mode="form" label-position="left" ref="forms" label-width="120px">
				<el-form-item label="标题">
					<el-input style="width: 220px;" placeholder="请输入标题" v-model="form.title"></el-input>
				</el-form-item>
				
				<el-form-item label="链接地址">
					<el-input style="width: 220px;" placeholder="请输入地址" v-model="form.href"></el-input>
				</el-form-item>

				<el-form-item label="banner" >
					<upload-file-component type="banner" :imageUrl="form.path" @uploadFileSuccess="uploadFileSuccess"/>
				</el-form-item>
				
				<el-form-item label="状态">
					<template>
						<el-radio v-model="form.status" label="1">启用</el-radio>
						<el-radio v-model="form.status" label="2">禁用</el-radio>
					</template>
				</el-form-item>
				
				<el-form-item>
					<div class="btn-contnet">
						<el-button v-if="currentId" type="primary" :loading="creating" @click="editSure">保存
						</el-button>
						<el-button v-else type="primary" :loading="creating" @click="sureAdd">确认</el-button>
						<el-button v-if="currentId" @click="showAdd=false">取消</el-button>
					</div>
				</el-form-item>
			</el-form>
		</el-dialog>
    </div>
</template>

<script>
import {getBannerList} from '../../api/setting.js';
import {IMG_URL} from '../../conf/config.js';
import UploadFileComponent from '@/components/UploadFile'
export default {
	components: {UploadFileComponent},
    data() {
        return {
			loading: false,
			creating: false,
            query: {
                title: '',
                page: 1,
                pageSize: 10
            },
			pageTotal: 0,
            tableData: [],
            multipleSelection: [],
            delList: [],
			showAdd: false,//添加弹窗
			currentId: -1, //当前id
			form: {
				status: '1',
				path: '',
				title:'',
				href:'',
			},
        };
    },
    created() {
        this.getData();
    },
    methods: {
        // 获取 easy-mock 的模拟数据
        async getData() {
			console.log(this.query);
            let [e, data] = await getBannerList(this.query)
            if (e) throw e;
            this.tableData = data.data.list
        },
		//添加btn
		addBanner(){
			this.currentId = ''
			this.form.status = 1
			this.form.path = ''
			this.form.title = ''
			this.form.href = ''
			this.showAdd = true
		},
		//确认添加按钮
		sureAdd(){
			
		},
		// 编辑操作
		handleEdit(index, row) {
			console.log(row);
			this.currentId = row.id
			this.form = row
			this.form.status = row.status+''
			this.showAdd = true
		},
		// 保存编辑
		editSure() {
		    this.editVisible = false;
		    this.$message.success(`修改第 ${this.idx + 1} 行成功`);
		    this.$set(this.tableData, this.idx, this.form);
		},
		uploadFileSuccess(){
			
		},
        // 触发搜索按钮
        handleSearch() {
            this.getData();
        },
        // 删除操作
        handleDelete(index, row) {
            // 二次确认删除
            this.$confirm('确定要删除吗？', '提示', {
                type: 'warning'
            })
                .then(() => {
                    this.$message.success('删除成功');
                    this.tableData.splice(index, 1);
                })
                .catch(() => {});
        },
        // 多选操作
        handleSelectionChange(val) {
            this.multipleSelection = val;
        },
        delAllSelection() {
            const length = this.multipleSelection.length;
            let str = '';
            this.delList = this.delList.concat(this.multipleSelection);
            for (let i = 0; i < length; i++) {
                str += this.multipleSelection[i].name + ' ';
            }
            this.$message.error(`删除了${str}`);
            this.multipleSelection = [];
        },
        
        // 分页导航
        handlePageChange(val) {
            this.$set(this.query, 'page', val);
            this.getData();
        }
    },
	computed: {
		bannerUrl(){
			return (url) => {
				return this.$extconf.IMG_URL + url
			}
		}
	}
};
</script>

<style scoped>
.handle-box {
    margin-bottom: 20px;
}

.handle-select {
    width: 120px;
}

.handle-input {
    width: 300px;
    display: inline-block;
}
.table {
    width: 100%;
    font-size: 14px;
}
.red {
    color: #ff0000;
}
.mr10 {
    margin-right: 10px;
}
.table-td-thumb {
    display: block;
    margin: auto;
    height: 40px;
}
</style>
